<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="../../jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        //页面加载完毕
        $(function () {

            //导航中所有文本颜色为黑色
            $(".liClass > a").css("color", "black");

            //默认选中导航菜单中的第一个菜单项
            $(".liClass:first").addClass("active");

            //第一个菜单项的文字变成白色
            $(".liClass:first > a").css("color", "white");

            //给所有的菜单项注册鼠标单击事件
            $(".liClass").click(function () {
                //移除所有菜单项的激活状态
                $(".liClass").removeClass("active");
                //导航中所有文本颜色为黑色
                $(".liClass > a").css("color", "black");
                //当前项目被选中
                $(this).addClass("active");
                //当前项目颜色变成白色
                $(this).children("a").css("color", "white");
            });

            //展示市场活动页面
            window.open("type/index.html", "workareaFrame");

        });

    </script>

</head>
<body>

<!-- 我的资料 -->
<div class="modal fade" id="myInformation" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">我的资料</h4>
            </div>
            <div class="modal-body">
                <div style="position: relative; left: 40px;">
                    姓名：<b>张三</b><br><br>
                    登录帐号：<b>zhangsan</b><br><br>
                    组织机构：<b>1005，市场部，二级部门</b><br><br>
                    邮箱：<b>zhangsan@bjpowernode.com</b><br><br>
                    失效时间：<b>2017-02-14 10:10:10</b><br><br>
                    允许访问IP：<b>127.0.0.1,192.168.100.2</b>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改密码的模态窗口 -->
<div class="modal fade" id="editPwdModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 70%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="oldPwd">原密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="oldPwd" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="newPwd">新密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="newPwd" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="confirmPwd">确认密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="confirmPwd" style="width: 200%;" type="text">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='../../login.jsp';"
                        type="button">更新
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 退出系统的模态窗口 -->
<div class="modal fade" id="exitModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">离开</h4>
            </div>
            <div class="modal-body">
                <p>您确定要退出系统吗？</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='../../login.jsp';"
                        type="button">确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 顶部 -->
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
    <div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">
        CRM &nbsp;<span style="font-size: 12px;">&copy;2017&nbsp;动力节点</span></div>
    <div style="position: absolute; top: 15px; right: 15px;">
        <ul>
            <li class="dropdown user-dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"
                   style="text-decoration: none; color: white;">
                    <span class="glyphicon glyphicon-user"></span> zhangsan <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="../../workbench/index.jsp"><span class="glyphicon glyphicon-home"></span> 工作台</a></li>
                    <li><a href="../index.html"><span class="glyphicon glyphicon-wrench"></span> 系统设置</a></li>
                    <li><a data-target="#myInformation" data-toggle="modal" href="javascript:void(0)"><span
                            class="glyphicon glyphicon-file"></span> 我的资料</a></li>
                    <li><a data-target="#editPwdModal" data-toggle="modal" href="javascript:void(0)"><span
                            class="glyphicon glyphicon-edit"></span> 修改密码</a></li>
                    <li><a data-target="#exitModal" data-toggle="modal" href="javascript:void(0);"><span
                            class="glyphicon glyphicon-off"></span> 退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<!-- 中间 -->
<div id="center" style="position: absolute;top: 50px; bottom: 30px; left: 0px; right: 0px;">

    <!-- 导航 -->
    <div id="navigation" style="left: 0px; width: 18%; position: relative; height: 100%; overflow:auto;">

        <ul class="nav nav-pills nav-stacked" id="no1">
            <li class="liClass"><a href="type/index.html" target="workareaFrame"><span
                    class="glyphicon glyphicon-book"></span> 字典类型</a></li>
            <li class="liClass"><a href="value/index.html" target="workareaFrame"><span
                    class="glyphicon glyphicon-list"></span> 字典值</a></li>
        </ul>

        <!-- 分割线 -->
        <div id="divider1"
             style="position: absolute; top : 0px; right: 0px; width: 1px; height: 100% ; background-color: #B3B3B3;"></div>
    </div>

    <!-- 工作区 -->
    <div id="workarea" style="position: absolute; top : 0px; left: 18%; width: 82%; height: 100%;">
        <iframe name="workareaFrame" style="border-width: 0px; width: 100%; height: 100%;"></iframe>
    </div>

</div>

<div id="divider2" style="height: 1px; width: 100%; position: absolute;bottom: 30px; background-color: #B3B3B3;"></div>

<!-- 底部 -->
<div id="down" style="height: 30px; width: 100%; position: absolute;bottom: 0px;"></div>

</body>
</html>